09. Relative Neighbors

Relative adjustments occur after elements are laid out in the normal flow.

This animation gives you a glimpse into how the browser handles relative flow. Did you notice that every element gets laid out in the normal flow first? After the normal flow has finished, the relatively positioned element's top and left properties take effect.

Also, notice how the blue box finishes on top of the purple box. Overlapping siblings necessarily appear on top of or behind one another (you can't mix elements like you would mix paint!). What happens when elements overlap depends on their order in the DOM and if they are "positioned". The earlier an element appears in the DOM, the "lower" the element is in the stacking order. Since the blue element appears earlier in the HTML before the purple element, it is lower in the default stacking order, however, since the blue box has been set to position: relative;, it displays on top of the purple box.

The idea that elements can be on top of or behind one another stems from the fact that browsers use a layering system, which you'll be learning about next.